
<template>
  <div class="ve-quill-editors" :style="{width, height}">
    <quill-editor
      ref="elQuillEditor"
      class="ve-quill-editor"
      :value="content"
      :options="optons"
      @change="onEditorChange"
      @blur="onEditorBlur($event)"
      @focus="onEditorFocus($event)"
      @ready="onEditorReady($event)"
    />

    <!-- <div class="output code">
      <code class="hljs" v-html="contentCode" />
    </div>-->
    <!-- <div class="output ql-snow">
      <div class="ql-editor" v-html="content" />
    </div>-->
  </div>
</template>

<script>
// import dedent from 'dedent'
import hljs from "highlight.js";
import debounce from "lodash/debounce";
import { quillEditor } from "vue-quill-editor";
import optons from "vue-quill-editor/src/options";

// import theme style
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";

// highlight.js style
import "highlight.js/styles/tomorrow.css";

export default {
  name: "VeQuillEditor",
  components: {
    quillEditor,
  },
  model: {
    prop: "model",
  },
  props: {
    model: {
      type: String,
      default: "",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "400px",
    },
    editorBlur: {
      type: Function,
      default: null,
    },
    editorFocus: {
      type: Function,
      default: null,
    },
    editorReady: {
      type: Function,
      default: null,
    },
  },
  data() {
    return {
      optons,
    };
  },
  computed: {
    content: {
      get() {
        return this.model;
      },
      set(v) {
        this.$emit("input", v);
      },
    },
  },
  methods: {
    quill() {
      return this.$refs.elQuillEditor.quill;
    },
    contentCode(content) {
      return hljs.highlightAuto(content).value;
    },
    onEditorChange: debounce(function (value) {
      this.content = value.html;
    }, 466),
    onEditorBlur(editor) {
      if (typeof this.editorBlur === "function") {
        this.editorBlur(editor);
      }
    },
    onEditorFocus(editor) {
      if (typeof this.editorFocus === "function") {
        this.editorFocus(editor);
      }
    },
    onEditorReady(editor) {
      if (typeof this.editorReady === "function") {
        this.editorReady(editor);
      }
    },
  },
};
</script>

<style lang="scss">
.ve-quill-editors {
  margin-bottom: 18px;
}
.ve-quill-editor {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #fff;
  .ql-toolbar.ql-snow,
  .ql-container.ql-snow {
    border: 1px solid #dcdfe6;
  }
}
</style>
